<template>
  <div class="app-container think-container">
    <div class="think-item">
      <div v-for="item of inner" :key="item.id" class="think-row">
        <h3>{{item.title}}</h3>
        <div class="box">
          <div v-for="jtem of item.children" :key="jtem.url" class="think-box" @click="openLink(jtem)" v-has="jtem.vHas">
            <svg-icon class-name="think-icon" :iconClass="jtem.icon"></svg-icon>
            <span>{{jtem.name}}</span>
          </div>
        </div>
      </div>
      <!-- <a-row type="flex" :gutter="4" class="think-row" align="middle" justify="start">
        <a-col class="gutter-row" :span="4" v-for="(item,i) of  inner" :key="i" v-has="item.vHas">
          <div class="think-box" @click="openLink(item)">
            <div class="think-content">
              <svg-icon class-name="think-icon" :iconClass="item.icon"></svg-icon>
              <p>{{item.name}}</p>
            </div>
          </div>
        </a-col>
      </a-row> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'Index',
  components: {},
  data() {
    return {
      permissions: [],
      myPermission: '/upms/user/getAllPermissionValues',
      inner: [
        {
          title: '科技成果',
          id: 1,
          children: [
            { url: '/techList', name: '科研技术库', isHte: true, icon: '科研技术库' },
            { url: '/engineeTech/list', name: '工程技术库', isHte: true, icon: '工程技术库' },
            { url: '/library/index/4?mgFlag=1', name: '外部科技成果库', isHte: true, icon: '外部科技成果库'},
          ]
        },
        {
          title: '产品相关',
          id: 2,
          children: [
            { url: '/product/resource/toList', name: '产品信息库', isHte: false, icon: '产品信息库' },
            { url: '/product/resource/toHalfList', name: '半成品库', isHte: false, icon: '半成品库' },
            { url: '/lawsReg/index', name: '食品合规库', isHte: false, icon: '食品合规库' },
            { url: '/rad/resource/toCompeteProductsLibrary', name: '竞品数据库', isHte: false, icon: '竞品数据库' },
            { url: '/bomRight/toBomList', name: 'BOM查询', isHte: false, icon: 'BOM查询' },
            { url: '/clearSoln/home', name: '清消方案库', isHte: true, icon: '清消库'},
            {
              url: '/stdSample/list',
              name: '标准样制定',
              isHte: true,
              icon: '标准样'
            },
          ]
        },
        {
          title: '资讯信息',
          id: 3,
          children: [
            { url: '/library/index/4', name: '科技图书馆', isHte: true, icon: '科技图书馆' },
            { url: '/library/index/2', name: '政策资源库', isHte: true, icon: '资源政策库' },
            { url: '/company/list', name: '公司信息库', isHte: true, icon: '公司信息库' ,vHas:'company:read'},
            { url: '/trademarklibrary/index', name: '知识产权库', isHte: true, icon: '知识产权库' },
          ]
        },
        {
          title: '工具库',
          id: 4,
          children: [
            { url: '/cooking/index', name: '烹饪库', isHte: false, icon: '烹饪库' },
            // { url: '/library/media', name: '媒体素材库', isHte: true, icon: '素材库'},
            //{ url: '/library/media/orderList', name: '素材订单库', isHte: true, icon: '素材库'},
            //{ url: '/blank', name: '通用素材库', isHte: false,isMedia:true, icon: '素材库'},
          ]
        },
      ],
    }
  },
  created() {},
  methods: {
    openLink(data) {
      let url = data.url
      if (!url) {
        this.$info({
          title: 'Hello，该模块正在火热建设中，暂时未上线',
          onOk() {}
        })
        return
      }
      if(url=='/techList' && this.permissions.indexOf('tech:index')==-1){
        this.$message.warning('您未分配【科研技术库】权限，如需分配请联系管理员')
        return
      }
      if(url=='/techEngineeList' &&  this.permissions.indexOf('engineeTech:index')==-1){
        this.$message.warning('您未分配【工程技术库】权限，如需分配请联系管理员')
        return
      }
      if (data.isHte) {
        let urlJump = this.$router.resolve({ path: url })
        window.open(urlJump.href, '_blank')
      } else if(data.isMedia){
        window.open(this.MEDIA_BASE_URL + url + `?hteToken=${Vue.ls.get(ACCESS_TOKEN)}`, '_blank')
      }else {
        window.open(this.HTE_OLD_SERVER_URL + url + `?bootToken=${Vue.ls.get(ACCESS_TOKEN)}`, '_blank')
      }
    },
  },
  computed: {},
  filters: {},
  watch: {},
  mounted() {
    var this_=this;
    getAction(this.myPermission, { projectId: -1 }).then((res) => {
        if (res.code==200) {
          this_.permissions = res.result
        }else{
          this.$message.warning('加载权限数据失败:'+res.message)
        }
      })
  }
}
</script>

<style lang="less"  scoped >
.think-container{padding: 0 125px;}
.think-item {
  padding: 36px 0 20px;
  background-color: #fff;
  font-weight: Bold;
  font-size: 14px;
  color: #606266;
  margin-top:-8px;
  .box{display: flex;flex-wrap: wrap;}
  .think-row {
    margin: 0 auto 20px;
    max-width: 1445px;
    width: 89%;
    h3{font-weight: Bold;margin-bottom: 13px;font-size: 18px;color: #303133;position: relative;padding-left:13px;
      &:before{content: '';position: absolute;left: 0;height: 70%;top:15%;width: 4px;background: #4F81C4;}
    }
    .think-box {
      background: #FFFFFF;
      border: 1px solid #f1f1f1;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.03);
      border-radius: 4px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 12px 20px;min-width: 226px;
      cursor: pointer;display: flex;align-items: center;justify-content: space-between;transition: all 0.3s;position:relative;
      .think-icon{font-size: 52px;}
      &:hover {background: #2787C8; transform: translate3d(0, -5px, 0);color: #fff;}
    }
  }
}
</style>
